<template>
	<!-- 导航 -->
	<view v-if="from=='index'" class="nav-box index-nav"
		:style="{position: pos, background: backgroundColor, width: navWidth+'px', height: navHeight+'px',
		paddingTop: navPaddingT+'px', paddingBottom: navPaddingB+'px', paddingLeft: navPaddingB+'px', paddingRight: navPaddingR+'px'}"
	>
		<view class="college-box" @click="goSelectCollege()">
			<u-icon name="map" :color="primaryColor2" size="36"></u-icon>
			<text class="s30 primary2">{{ getNchar(collegeName, 16, '...') }}</text>
		</view>
	</view>
	
	<view v-else-if="from=='message'" class="nav-box"
		:style="{position: pos, background: backgroundColor, width: navWidth+'px', height: navHeight+'px',
		paddingTop: navPaddingT+'px', paddingBottom: navPaddingB+'px', paddingLeft: navPaddingB+'px', paddingRight: navPaddingR+'px'}"
	>
		<view class="icon-box" :style="{height: iconHeight+'px'}">
			<u-icon name="saoba" custom-prefix="custom-icon" color="#999999" :size="36"
				label='全部已读' label-size="26" label-pos="right" label-color="#999999" margin-left="4" @click="clickReadAll()">
			</u-icon>
		</view>
		<text class="title" :style="{lineHeight: navHeight+'rpx'}">{{ pageTitle }}</text>
	</view>
	
	<view v-else-if="from=='postVideo'" class="nav-box"
		:style="{position: pos, background: backgroundColor, width: navWidth+'px', height: navHeight+'px',
		paddingTop: navPaddingT+'px', paddingBottom: navPaddingB+'px', paddingLeft: navPaddingB+'px', paddingRight: navPaddingR+'px'}"
	>
		<view class="icon-box" :style="{width: iconHeight+'px', height: iconHeight+'px'}" @click.stop="clickBack()">
			<u-icon name="arrow-left" color="#ffffff" size="40"></u-icon>
		</view>
	</view>
	
	<view v-else-if="from=='searchHistory' || from=='searchList'" class="nav-box sb"
		:style="{position: pos, background: backgroundColor, width: navWidth+'px', height: navHeight+'px',
		paddingTop: navPaddingT+'px', paddingBottom: navPaddingB+'px', paddingLeft: navPaddingB+'px', paddingRight: navPaddingR+'px'}"
	>
		<view class="icon-box" :style="{width: iconHeight+'px', height: iconHeight+'px'}" @click.stop="clickBack()">
			<u-icon name="arrow-left" color="#333333" size="40"></u-icon>
		</view>
		<u-search :clearabled="false" :placeholder="placeholder" v-model="keyword" :height="iconHeight*2" @custom="confirmSearch" @search="confirmSearch"></u-search>
	</view>
	
	<view v-else-if="from=='publish'" class="nav-box"
		:style="{position: pos, background: backgroundColor, width: navWidth+'px', height: navHeight+'px',
		paddingTop: navPaddingT+'px', paddingBottom: navPaddingB+'px', paddingLeft: navPaddingB+'px', paddingRight: navPaddingR+'px'}"
	>
		<!-- <view class="icon-box" :style="{width: iconHeight+'px', height: iconHeight+'px'}" @click.stop="clickBack()">
			<u-icon name="arrow-left" color="#333333" size="40"></u-icon>
		</view> -->
		<text class="title" :style="{lineHeight: navHeight+'rpx'}">{{ pageTitle }}</text>
	</view>
</template>

<script>
	export default {
		props: {
			from: {
				type: String,
				default: 'normal'
			}, // 父页面
			
			pos: {
				type: String,
				default: 'sticky'
			}, // 定位样式
			
			backRgb: {
				type: String,
				default: '255,255,255'
			}, // 背景颜色rgb
			
			backColorOpacity: {
				type: String,
				default: '0'
			}, // 背景颜色透明度 '0'透明 '1'不透明 'auto'滑动渐变
			
			pageScroll:{
				type: Object,
				default:function(){
				  return {}
				}
			}, //页面的onPageScroll
			
			collegeName: {
				type: String,
				default: '全部'
			}, // 学校名称
			
			placeholder: {
				type: String,
				default: '请输入搜索内容'
			}, // 搜索占位符
			
			// keyword: {
			// 	type: String,
			// 	default: ''
			// }, // 搜索关键词
			
			pageTitle: {
				type: String,
				default: ''
			}, // 页面标题
			
		},
		data() {
			return {
				statusBarHeight: null, // 状态栏高度
				navWidth: null, // 导航栏宽度
				navHeight: null, // 导航栏高度
				iconHeight: null, // 图标盒子高度
				navPaddingT: null, // 导航栏上padding
				navPaddingB: null, // 导航栏下padding
				navPaddingR: null, // 导航栏右padding
				backgroundColor: 'rgba(27, 187, 175, 0)', // 背景颜色
				primaryColor: '#1BBBAF', // 主题色
				searchWords: '', // 搜索关键词
				showTitle: false, // 显示标题
				
				keyword: '', // 搜索关键词
			}
		},
		computed: {
			
		},
		watch: {
			pageScroll(val, oldVal){
				if (this.backColorOpacity=='auto') { // 如果设置导航滑动渐变
					//导航栏透明设置 及监听滚动
					this.setTVAuto(val)
				}
			},
		},
		created() {
			if (this.backColorOpacity=='auto') { // 如果设置导航滑动渐变
				//导航栏透明设置 及监听滚动
				this.setTVAuto(this.pageScroll)
			} else { // 如果设置导航固定颜色
				this.backgroundColor = `rgba(${this.backRgb},${this.backColorOpacity})`
			}
		},
		beforeMount() {
			// 获取状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			const capsule = uni.getMenuButtonBoundingClientRect()
			console.log('胶囊:', capsule)
			// 导航栏宽
			this.navWidth = uni.getSystemInfoSync().windowWidth
			// 计算导航栏上padding
			// this.navPaddingT = (capsule.top - this.statusBarHeight) + this.statusBarHeight
			this.navPaddingT = capsule.top
			// 计算导航栏下padding
			// this.navPaddingB = this.navWidth - capsule.right
			this.navPaddingB = capsule.top - this.statusBarHeight
			// 计算导航栏右padding
			this.navPaddingR = (this.navWidth - capsule.right) * 2 + capsule.width
			// 计算导航栏高
			this.navHeight = capsule.height + this.navPaddingT + this.navPaddingB
			// 计算图标盒子宽高
			this.iconHeight = capsule.height
		},
		methods: {
			//滑动渐变
			setTVAuto(e){
				if (e.scrollTop > 100) {
					this.backgroundColor = `rgba(${this.backRgb},1)`
					this.showTitle = true
				} else {
					this.backgroundColor = `rgba(${this.backRgb},${e.scrollTop/100})`
					this.showTitle = false
				}
			},
			
			// 点击返回
			clickBack() {
				// let routes = getCurrentPages() // 获取当前打开过的页面路由数组
				// if (routes.length==1) { // 如果路由里没有上一页则是直接进入的详情页
				// 	uni.switchTab({
				// 		url: '/pages/index/index'
				// 	})
				// } else {
				// 	uni.navigateBack()
				// }
				this.$emit('clickBack')
			},
			
			// 跳转到学校选择
			goSelectCollege() {
				uni.navigateTo({
					url: '/pages/subPackage/platform/college_list/college_list'
				})
			},
			
			// 点击全部已读
			clickReadAll() {
				this.$emit('clickReadAll')
			},
			
			// 在首页、店铺详情页、宠圈页点击搜索框
			goSearchHistory() {
				this.$emit('goSearch', this.from)
			},
			// 在搜索历史页或搜索结果列表页点击搜索或回车搜索
			confirmSearch(e) {
				console.log(e)
				if (!e) {
					return uni.showToast({
						icon: 'none',
						title: '搜索内容不能为空！'
					})
				}
				if (this.from == 'searchHistory') {
					this.$emit('goSearch', e)
				} else if (this.from == 'searchList') {
					this.$emit('search', e)
				}
			},
			
		},
	}
</script>

<style scoped lang="scss">
	.nav-box {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		left: 0;
		top: 0;
		z-index: 999;
		// 特殊布局
		&.sb {
			display: flex;
			justify-content: space-between;
		}
		// logo
		.logo {
			width: 176rpx;
			height: 64rpx;
		}
		// 静态搜索框
		.search-box {
			box-sizing: border-box;
			height: 92%;
			padding: 0 18rpx;
			background: $uni-bg-color;
			border-radius: 100rpx;
			border: 1rpx solid $uni-color-primary;
			display: grid;
			align-items: center;
			grid-template-columns: 48rpx 1fr;
			.placeholder, .input {
				line-height: 28rpx;
			}
			.placeholder {
				font-size: 26rpx;
				color: $uni-text-color-placeholder;
			}
			.input {
				width: 100%;
				font-size: 28rpx;
				color: $uni-text-color;
			}
		}
		// 标题
		.title {
			font-size: 34rpx;
			color: $uni-text-color;
			font-weight: bold;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
		// 图标盒子
		.icon-box {
			box-sizing: border-box;
			height: 100%;
			// padding: 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&.dark {
				border: 1rpx solid rgba(255, 255, 255, 0.3);
				padding: 0 14rpx;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.15);
			}
			&.primary {
				border: 1rpx solid rgba(255, 255, 255, 0.3);
				padding: 0 14rpx;
				border-radius: 50%;
				background: rgba(27, 187, 175, 0.7);
			}
			// 图标
			.icon {
				display: block;
			}
			.icon48 {
				width: 48rpx;
				height: 48rpx;
			}
		}
		// 按钮
		.button {
			width: 148rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			color: $uni-text-color-inverse;
			&.primary {
				background: $uni-color-primary;
			}
			&.grey {
				background: #dddddd;
			}
		}
		// 文字限制一行
		.limit1 {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;  //使用自适应布局
			-webkit-line-clamp: 1;  //设置超出行数，要设置超出几行显示省略号就把这里改成几
			-webkit-box-orient: vertical;
		}
	}
</style>
